import { Button } from 'antd';
import React, { useContext } from 'react';
import content from './../../../../content';
import { setString } from '@/utils/utils';
import './index.less';
const configuration = (props) => {
  const contentValue = useContext(content);
  const { data, setData } = contentValue;
  const handleText = () => {
    setData([
      ...data.map((item) => {
        return {
          ...item,
          show: false,
        };
      }),
      {
        type: 'text',
        label: '文本框',
        require: true,
        placeholder: '请输入内容',
        show: true,
        keyString: setString(true, 12, 18),
      },
    ]);
  };
  const handleUserText = (label, onlyKey) => {
    setData([
      ...data.map((item) => {
        return {
          ...item,
          show: false,
        };
      }),
      {
        onlyKey: onlyKey,
        type: 'text',
        label: label,
        disabled: true,
        require: true,
        placeholder: '请输入内容',
        show: true,
      },
    ]);
  };
  const handleDescribe = () => {
    setData([
      ...data.map((item) => {
        return {
          ...item,
          show: false,
        };
      }),
      {
        type: 'describe',
        label: '文本描述',
        show: true,
        keyString: setString(true, 12, 18),
      },
    ]);
  };
  const handleDropdown = () => {
    setData([
      ...data.map((item) => {
        return {
          ...item,
          show: false,
        };
      }),
      {
        type: 'dropdown',
        label: '下拉菜单',
        require: true,
        placeholder: '请选择',
        show: true,
        option: ['选项1', '选项2', '选项3'],
        keyString: setString(true, 12, 18),
      },
    ]);
  };
  const handleCheckedBox = () => {
    setData([
      ...data.map((item) => {
        return {
          ...item,
          show: false,
        };
      }),
      {
        type: 'checkedBox',
        label: '选择',
        require: true,
        placeholder: '请选择',
        show: true,
        option: ['选项1', '选项2', '选项3'],
        setting: 'radius',
        keyString: setString(true, 12, 18),
      },
    ]);
  };
  const handleDate = () => {
    setData([
      ...data.map((item) => {
        return {
          ...item,
          show: false,
        };
      }),
      {
        type: 'date',
        label: '日期',
        require: true,
        show: true,
        setting: 'day',
        keyString: setString(true, 12, 18),
      },
    ]);
  };
  const handleImage = (onlyKey) => {
    setData([
      {
        onlyKey: onlyKey,
        type: 'cephalogram',
        label: '头图',
        desc: '此处展示引导说明',
        show: true,
      },
      ...data.map((item) => {
        return {
          ...item,
          show: false,
        };
      }),
    ]);
  };
  const filterDesibled = (key) => {
    let falg = false;
    data.forEach((item) => {
      if (item.onlyKey === key) {
        falg = true;
      }
    });
    return falg;
  };
  const userList = [
    {
      label: '姓名',
      onlyKey: 'username',
      click: () => handleUserText('姓名', 'username'),
    },
    {
      label: '年龄',
      onlyKey: 'age',
      click: () => handleUserText('年龄', 'age'),
    },
    {
      label: '手机码',
      onlyKey: 'phone',
      click: () => handleUserText('电话号码', 'phone'),
    },
    {
      label: '公司',
      onlyKey: 'company',
      click: () => handleUserText('公司', 'company'),
    },
    {
      label: '职位',
      onlyKey: 'job',
      click: () => handleUserText('请输入您的职位', 'job'),
    },
    {
      label: '证件号',
      onlyKey: 'cardNum',
      click: () => handleUserText('请输入您的证件号', 'cardNum'),
    },
    {
      label: '微信号',
      onlyKey: 'weChat',
      click: () => handleUserText('请输入您的微信号', 'weChat'),
    },
    {
      label: '邮箱',
      onlyKey: 'email',
      click: () => handleUserText('请输入您的邮箱', 'email'),
    },
    {
      label: '生日',
      onlyKey: 'birthday',
      click: () => handleUserText('请输入您的生日', 'birthday'),
    },
    {
      label: '语言',
      onlyKey: 'language',
      click: () => handleUserText('请输入您的语言', 'language'),
    },
    {
      label: '国家',
      onlyKey: 'country',
      click: () => handleUserText('请输入您的国家', 'country'),
    },
    {
      label: '行业',
      onlyKey: 'hy',
      click: () => handleUserText('请输入您的行业', 'hy'),
    },
    {
      label: '兴趣',
      onlyKey: 'xy',
      click: () => handleUserText('请输入您的兴趣', 'xy'),
    },
    {
      label: '地址',
      onlyKey: 'address',
      click: () => handleUserText('请输入您的地址', 'address'),
    },
  ];
  const defaultList = [
    {
      label: '文本框',
      click: handleText,
    },
    {
      label: '文本描述',
      click: handleDescribe,
    },
    {
      label: ' 下拉菜单',
      click: handleDropdown,
    },
    {
      label: ' 选择',
      click: handleCheckedBox,
    },
    {
      label: ' 日期',
      click: handleDate,
    },
  ];
  return (
    <div>
      <p style={{ marginBottom: 8, color: '#999999' }}>请选择需要采集的信息</p>
      <div className="configuration_box">
        <div className="configuration_title">联系人组件</div>
        <div className="configuration_components">
          {userList.map((item, index) => {
            const { label, click, onlyKey } = item;
            return (
              <Button
                key={index}
                className="configuration_item_box"
                disabled={filterDesibled(onlyKey)}
                onClick={() => {
                  click();
                }}
              >
                {label}
              </Button>
            );
          })}
        </div>
        <div className="configuration_title">基础组件</div>
        <div className="configuration_components">
          {defaultList.map((item, index) => {
            const { label, click } = item;
            return (
              <div
                key={index}
                className="configuration_item_box"
                onClick={() => {
                  click();
                }}
              >
                {label}
              </div>
            );
          })}
          <Button
            className="configuration_item_box"
            disabled={filterDesibled('img')}
            onClick={() => {
              handleImage('img');
            }}
          >
            头图
          </Button>
        </div>
      </div>
    </div>
  );
};
export default configuration;
